<template>
	<view class="container">
		<view class="account">
			<view class="bg">
				<text>￥{{total}}</text>
				<view class="btn" @click="toDetail">
					查看运营详情
				</view>
			</view>

			<view class="report">
				<view class="form day" @click="navTo('/pages/account/day_form')">
					<image src="/static/img/account/day.png" mode="widthFix"></image>
					<text>日报表</text>
					<text class="income">￥{{day_total}}</text>
				</view>
				<view class="form month" @click="navTo('/pages/account/month_form')">
					<image src="/static/img/account/month.png" mode="widthFix"></image>
					<text>月报表</text>
					<text class="income">￥{{month_total}}</text>
				</view>
			</view>

			<view class="ststion" @click="navTo('/pages/account/use')">
				<view class="ststion_l">
					<image src="/static/img/detail/duration.png" mode="aspectFill"></image>
					<text>使用记录</text>
				</view>
				<view class="ststion_r">
					<text>{{use_total}}条</text>
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="ststion" @click="navTo('/pages/account/onLine')">
				<view class="ststion_l">
					<image src="/static/img/account/station.png" mode="aspectFill"></image>
					<text>在线机柜</text>
				</view>
				<view class="ststion_r">
					<text>{{online}}</text>
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		agentBattery,
		accountIndex,
		getUserInfo
	} from '../../api/api.js'
	export default {
		data() {
			return {
				battery: '',
				total:'',
				day_total:'',
				month_total:'',
				online:'',
				use_total:'',
				myList: []
			}
		},
		onLoad() {
			this.getInfo()
			this.getuser()
			this.getAccount()
		},
		methods: {
			// 代理
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getuser(){
				getUserInfo().then(res=>{
					console.log(res)
					if(res.data.is_fenzhang == 0){
							uni.showModal({
								title: '提示',
								content: '暂无权限',
								showCancel: false,
								success: function(res) {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
					}
				})
			},
			getInfo() {
				agentBattery().then(res => {
					this.battery = res.data.curr_use
					this.myList = res.data.data
				})
			},
			toBatteryDetail(id) {
				uni.navigateTo({
					url: '/pages/agent/index/detail?id=' + id
				})
			},
			
			// 分账
			getAccount(){
				accountIndex().then(res=>{
					this.day_total = res.data.day_total
					this.month_total = res.data.month_total
					this.online = res.data.online
					this.total = res.data.total
					this.use_total = res.data.use_total
				})
			},
			// 分账
			toDetail() {
				uni.navigateTo({
					url: '/pages/account/detail'
				})
			}

		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.agent {
		width: 100%;
		height: 100%;

		.info {
			width: 100%;
			height: 230upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 70%;
					margin-bottom: 20upx;
				}

				text {
					font-size: 24upx;
				}
			}
		}

		.battery {
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 30upx;

			.my {
				width: calc(100% - 60upx);
				height: 80upx;
				margin: 0 auto;
				display: flex;
				font-size: 28upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #e9e6e9;

				.num {
					color: #999999;
					font-size: 24upx;

					text {
						color: #fb817f;
					}
				}

			}

			.content {
				width: calc(100% - 60upx);
				margin: 0 auto;

				.batt {
					width: 100%;
					height: 130upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1upx solid #e9e6e9;

					.left {
						display: flex;
						align-items: center;
						font-size: 28upx;

						image {
							width: 80upx;
							margin-right: 20upx;
						}

						.txt {

							.name {}

							.money {
								color: #999999;

								text {
									color: #fb817f;
								}
							}
						}
					}

					.right {
						font-size: 32upx;

						text {
							font-size: 24upx;
						}

						.use {
							color: #fb817f;
							font-size: 32upx;
						}
					}
				}
			}
		}

	}

	.account {
		width: 100%;
		height: 100%;

		.bg {
			width: 100%;
			height: 300upx;
			background-image: linear-gradient(#e8a84e, #ff7d3f);
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #FFFFFF;
			font-size: 28upx;

			text {
				font-size: 52upx;
				margin: 50upx 0;
			}

			.btn {
				width: 200upx;
				height: 60upx;
				text-align: center;
				padding: 0 10upx;
				border-radius: 30upx;
				color: #fba67b;
				background-color: #FFFFFF;
				line-height: 60upx;
			}

		}

		.report {
			width: calc(100% - 60upx);
			height: 300upx;
			margin: 30upx auto;
			display: flex;
			justify-content: space-between;

			.form {
				width: 48%;
				height: 100%;
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text {
					font-size: 28upx;
					margin-top: 10upx;
				}

				.income {
					font-size: 40upx;
				}

			}

			.day {
				image {
					width: 90upx;
				}
			}

			.month {
				image {
					width: 124upx;
				}
			}
		}

		.ststion {
			width: calc(100% - 120upx);
			height: 90upx;
			background-color: #FFFFFF;
			margin: 0 auto 20upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			border-radius: 10upx;


			.ststion_l {
				height: 100%;
				display: flex;
				align-items: center;

				image {
					width: 20upx;
					height: 30upx;
					margin-right: 15upx;
				}
			}

			.ststion_r {
				height: 100%;
				display: flex;
				align-items: center;
				color: #999999;
				font-size: 24upx;

				image {
					width: 15upx;
					margin-left: 10upx;
				}
			}
		}
	}
</style>
